<template>
  <div>
    <div class="SequenceLi">
      <!-- <a-row type="flex" justify="start" :gutter="16">
        <a-col
          :xs="20"
          :sm="24"
          :md="24"
          :lg="12"
          :xl="12"
          :xxl="8"
          v-for="(item, index) in list"
          :key="index"
        >
          <div
            class="Sequence-one"
            :style="{
              'background-color':
                params && backgrounOn(item.macsn, item.macnum) ? '#a8d3f3' : '',
            }"
          >
            <div class="flex flex-a-c flex-j-s-b">
              <img
                :src="item.picture ? item.picture : defultimg"
                alt=""
                :onerror="onerrorimg"
              />
              <div class="Sequence-oneRight">
                <div
                  class="Sequence-oneRighttype"
                  :style="{ color: runStateOptioncolor(item.status, 1) }"
                >
                  <span>
                    <a-icon
                      class="icon"
                      :type="runStateOptioncolor(item.status, 2)"
                      theme="filled"
                      :style="{ color: runStateOptioncolor(item.status, 1) }"
                    />
                  </span>
                  {{ runStateOptioncolor(item.status, 3) }}
                </div>
                <p>
                  <a-icon
                    type="qrcode"
                    @click.stop="handleCode(record)"
                    style="fontSize: 16px;color: #40a9ff;"
                  />
                </p>
                <p>
                  <span>设备编号：</span>
                  {{ item.equipmentNumber }}
                </p>
                <p>
                  <span>设备型号：</span>
                  {{ item.equipmentModel }}
                </p>
                <p>
                  <span>设备类型：</span>
                  {{ item.equipmentTypeName }}
                </p>
                <p>
                  <span>设备编号：</span>
                  {{ item.macSn }}
                </p>
              </div>
            </div>
            <br />
            <div class="flex flex-a-c lookBox">
         
            </div>
          </div>
        </a-col>
      </a-row> -->

      <div class="card-content">
        <a-row :gutter="24" v-for="(item, index) in list" :key="index">
          <a-card>
            <div class="title">
              <div class="content_title">
                {{ item.name }}[<span style="color: #2FB818;">{{
                  filterState(item.data).length
                }}</span
                >/{{ item.data.length }}]
              </div>
              <div v-if="isShow" class="delete" @click="handDelete(item.id)">
                删除
              </div>
            </div>
            <a-col
              :span="8"
              v-for="(equitem, eqtindex) in item.data"
              :key="eqtindex"
            >
              <div class="item" :class="'equ' + equitem.id">
                <div class="checkbox" v-if="isShow">
                  <a-checkbox @change="onChange(equitem.id)"> </a-checkbox>
                </div>
                <div class="img">
                  <img
                    :src="equitem.pic ? `${apiUrl}${equitem.pic}` : defultimg"
                    alt=""
                    :onerror="onerrorimg"
                  />
                </div>
                <div class="info">
                  <div class="state">
                    <div
                      class="Sequence-oneRighttype"
                      :style="{ color: runStateOptioncolor(equitem.status, 1) }"
                    >
                      <span>
                        <a-icon
                          class="icon"
                          :type="runStateOptioncolor(equitem.status, 2)"
                          theme="filled"
                          :style="{
                            color: runStateOptioncolor(equitem.status, 1),
                          }"
                        />
                      </span>
                      {{ runStateOptioncolor(equitem.status, 3) }}
                    </div>
                  </div>
                  <div class="res_item">
                    <div class="res-title">设备编号:</div>
                    <div class="res-conter">{{ equitem.equipmentNumber }}</div>
                  </div>
                  <div class="res_item">
                    <div class="res-title">SN:</div>
                    <div class="res-conter">{{ equitem.macSn }}</div>
                  </div>
                  <div class="res_item">
                    <div class="res-title">设备型号:</div>
                    <div class="res-conter">{{ equitem.equipmentModel }}</div>
                  </div>
                  <div class="res_item">
                    <div class="res-title">设备名称:</div>
                    <div class="res-conter">
                      {{ equitem.equipmentName }}
                    </div>
                  </div>
                  <div class="res_item">
                    <div class="res-title">今日加工:</div>
                    <div class="res-conter">{{ equitem.dayCount }}</div>
                  </div>
                </div>
                <div class="code">
                  <div
                    @click="handleQr(equitem.id)"
                    style="text-align: right;font-size: 36px;background: white;clip-path: polygon(0 0, 100% 100%, 100% 0)"
                    :class="'qr' + equitem.id"
                  >
                    <vue-qr
                      :text="handleCode(equitem)"
                      :size="80"
                      :margin="0"
                      colorDark="black"
                      colorLight="white"
                    ></vue-qr>
                  </div>
                  <div class="btn">
                    <div
                      class="detail"
                      @click="handleEdit(equitem)"
                      style="margin-right: 10px;"
                    >
                      编辑设备
                    </div>
                    <div
                      class="detail"
                      @click="lookDetail(equitem, '/equipment/detail')"
                    >
                      查看详情
                    </div>
                  </div>
                  <a-modal
                    title="删除类型"
                    :visible="visible"
                    :mask="false"
                    @ok="handleOk"
                    @cancel="handleCancel"
                  >
                    <a-radio-group v-model="value" @change="radioChange">
                      <a-radio :value="0">
                        设备报废
                      </a-radio>
                      <a-radio :value="1">
                        设备信息删除
                      </a-radio>
                    </a-radio-group>
                  </a-modal>
                  <!-- <div @click="handleDown">下载</div> -->
                  <!-- <div
                    class="lookDetail"
                    @click="lookDetail(equitem, '/equipment/detail')"
                  >
                    设备详情
                  </div>
                  <div
                    class="lookDetail"
                    @click="lookDetail(equitem, '/equipment/product/details')"
                  >
                    生产统计
                  </div>
                  <div
                    class="lookDetail"
                    @click="lookDetail(equitem, '/equipment/yield/details')"
                  >
                    工件详情
                  </div> -->
                </div>
              </div>
            </a-col>
          </a-card>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import VueQr from "vue-qr";
import { CodeNo } from "@/unit/QRCodeConfig";
import api from "@/api/apiServer";
import { apiUrl } from "@/api/URLConfig";
// eslint-disable-next-line no-unused-vars
//<a-icon type="exclamation-circle" /><a-icon type="close-circle" />
let thecolor = [
  { icon: "check-circle", color: "#2FB818", name: "运行", value: 1000 },
  { icon: "exclamation-circle", color: "#D65B4A", name: "报警", value: 2000 },
  { icon: "minus-circle", color: "#FBC225", name: "待机", value: 3000 },
  { icon: "close-circle", color: "#68768C", name: "离线", value: 4000 },
  { icon: "close-circle", color: "#68768C", name: "离线", value: null },
];
// let list=[{name:"01",type:0},{name:"01",type:1},{name:"01",type:2},{name:"01",type:3}]
export default {
  name: "listSequence",
  components: { VueQr },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    params: {
      type: String,
      default: null,
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    list: {
      deep: true,
      handler(val) {
        return val;
      },
    },
    // isShow (newV, oldV) { // watch监听props里status的变化，然后执行操作
    //   console.log(newV, oldV)
    //   this.switchStatusData = newV
    // }
  },
  // computed: {
  //   switchStatus: function() {
  //     console.log(this.isShow,"0000");
  //     return this.isShow; // 直接监听props里的status状态
  //   },
  // },
  filter() {},
  data() {
    return {
      thecolor: thecolor,
      deleteType: 0,
      imgurl: "",
      visible: false,
      value: 0,
      idList: [],
      isCode: false,
      defultimg: require("@images/defaultImg.png"),
      // switchStatusData: this.isShow ,// 重新定义数据
      // list:list
      onerrorimg: 'this.src="' + require("@images/defaultImg.png") + '"',
      arrId: [],
      apiUrl,
    };
  },
  created() {
    this.imgurl = this.$pictureUrl;
  },
  methods: {
    backgrounOn(sn, num) {
      let index = false;
      let numflag = false;
      index = sn.indexOf(this.params) >= 0 ? true : false;
      numflag = num.indexOf(this.params) >= 0 ? true : false;
      return index || numflag;
    },

    lookDetail(item, path) {
      this.$router.push({
        path,
        query: { macSn: item.macSn },
      });
    },
    runStateOptioncolor(val, type) {
      let opt = thecolor.find((item) => item.value == val);
      if (type == 1) {
        return opt ? opt.color : "";
      } else if (type == 2) {
        return opt ? opt.icon : "";
      } else if (type == 3) {
        return opt ? opt.name : "";
      }
    },
    //生成二维码
    handleCode(record) {
      let { equipmentNumber, equipmentName, id } = record;
      let newObj = {
        equipmentNumber,
        equipmentName,
        id,
        QRCode: CodeNo.Equipment,
      };
      let text = JSON.stringify(newObj);
      return text;
    },
    //选择框
    onChange(item) {
      console.log(item, "多选变化");
      if (this.idList.indexOf(item) == -1) {
        this.idList.push(item);
        console.log(this.idList, "数组1");
      } else {
        this.idList.splice(this.idList.indexOf(item));
        console.log(this.idList, "数组2");
      }
    },
    async handleDown() {
      const content = await api.Dome(
        { pageNumber: 1, pageSize: 10, deleteFlag: "N" },
        { responseType: "blob" }
      );
      const blob = new Blob([content], {
        type: "application/vnd.ms-excel;charset=utf-8",
      });
      const fileName = "商品信息.xlsx";
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
    },
    //产线删除
    async handDelete(id) {
      const res = await api.DeleteProductLine({ id });
      console.log(res, "ioio");
      this.$emit("ok");
    },
    handleEdit(item) {
      this.$emit("handEdit", item);
    },
    //产线在线设备数
    filterState(arr) {
      let newarr = arr.filter((item) => {
        return item.status == 1000;
      });
      return newarr;
    },
    async addDel() {
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
    //设备删除
    async handleOk() {
      this.visible = false;
      const res = await api.equipmentDelete({
        ids: this.idList,
        deleteType: this.deleteType,
      });
      this.$message.success(res.message);
      this.$emit("ok");
    },
    //删除类型选择
    radioChange(e) {
      console.log("radio checked", e.target.value);
      this.deleteType = e.target.value;
    },
    //二维码显示隐藏
    handleQr(id) {
      const toQr = document.querySelector(`.qr${id}`);
      if (this.arrId.indexOf(id) == -1) {
        this.arrId.push(id);
        toQr.style.clipPath = "none";
      } else {
        this.arrId.splice(this.arrId.indexOf(id));
        toQr.style.clipPath = "polygon(0 0, 100% 100%, 100% 0)";
      }
    },
  },
};
</script>

<style scoped lang="less">
@import "style.less";
</style>
